import { Component } from '@angular/core';
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzFlexModule } from 'ng-zorro-antd/flex';
import { NzGridModule } from 'ng-zorro-antd/grid';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
import { NzSelectModule } from 'ng-zorro-antd/select';

@Component({
  selector: 'app-input-group-demo',
  standalone: true,
  imports: [
    NzInputModule,
    NzGridModule,
    NzSelectModule,
    NzFlexModule,
    NzInputNumberModule,
    NzDatePickerModule,
    NzCascaderModule,
  ],
  template: `
    <div class="demo">
      <nz-input-group nzSize="large" class="my-2">
        <nz-row nzGutter="8">
          <nz-col nzSpan="4">
            <input nz-input placeholder="区号" />
          </nz-col>
          <nz-col nzSpan="1" class="text-center">
            <input nz-input placeholder="-" disabled nzBorderless />
          </nz-col>
          <nz-col nzSpan="8">
            <input nz-input placeholder="电话号码" />
          </nz-col>
        </nz-row>
      </nz-input-group>

      <nz-input-group class="my-2" nzCompact>
        <input
          nz-input
          placeholder="区号"
          style="width: 16.6667%"
        /><!-- 4/24 -->
        <input
          nz-input
          placeholder="电话号码"
          style="width: 33.3333%"
        /><!-- 8/24 -->
      </nz-input-group>

      <nz-input-group nzCompact style="display:flex" class="my-2">
        <nz-select nzPlaceHolder="省份" [style.flex-basis]="'200px'">
          <nz-option nzValue="1" nzLabel="广东省"></nz-option>
          <nz-option nzValue="2" nzLabel="广西壮族自治区"></nz-option>
        </nz-select>
        <input nz-input placeholder="具体地址" [style.flex-grew]="'1'" />
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <nz-select nzPlaceHolder="省份">
          <nz-option nzValue="1" nzLabel="广东省"></nz-option>
          <nz-option nzValue="2" nzLabel="广西壮族自治区"></nz-option>
        </nz-select>
        <input nz-input placeholder="具体地址" style="width: 50%" />
        <nz-input-number nzPlaceHolder="门牌"></nz-input-number>
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <input nz-input placeholder="具体地址" style="width: 50%" />
        <nz-date-picker nzPlaceHolder="选择日期"></nz-date-picker>
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <nz-select nzPlaceHolder="省份">
          <nz-option nzValue="1" nzLabel="广东省"></nz-option>
          <nz-option nzValue="2" nzLabel="广西壮族自治区"></nz-option>
        </nz-select>
        <nz-select nzPlaceHolder="城市">
          <nz-option nzValue="1" nzLabel="广州市"></nz-option>
          <nz-option nzValue="2" nzLabel="南宁市"></nz-option>
        </nz-select>
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <nz-select nzPlaceHolder="情况">
          <nz-option nzValue="1" nzLabel="中间"></nz-option>
          <nz-option nzValue="2" nzLabel="除外"></nz-option>
        </nz-select>
        <input
          nz-input
          placeholder="最小值"
          style="width: 100px; text-align: center"
        />
        <input
          type="text"
          disabled
          nz-input
          placeholder="~"
          style="width: 30px; text-align: center"
          nzBorderless
        />
        <input
          nz-input
          placeholder="最大值"
          style="width: 100px; text-align: center"
        />
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <nz-select nzPlaceHolder="情况">
          <nz-option nzValue="1" nzLabel="中间"></nz-option>
          <nz-option nzValue="2" nzLabel="之外"></nz-option>
        </nz-select>
        <input
          nz-input
          placeholder="最小值"
          class="input-3 input-3-left"
          style="width: 100px; text-align: center"
        />
        <input
          type="text"
          disabled
          nz-input
          placeholder="~"
          class="input-3 input-3-middle"
          style="width: 30px; text-align: center"
        />
        <input
          nz-input
          placeholder="最大值"
          class="input-3 input-3-right"
          style="width: 100px; text-align: center"
        />
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <nz-select nzPlaceHolder="Sign up or in">
          <nz-option [nzLabel]="'Sign Up'" [nzValue]="'Sign Up'"></nz-option>
          <nz-option [nzLabel]="'Sign In'" [nzValue]="'Sign In'"></nz-option>
        </nz-select>
        <input
          type="email"
          nz-input
          placeholder="Email"
          style="width: 200px;"
        />
      </nz-input-group>

      <nz-input-group nzCompact class="my-2">
        <nz-select style="width: 30%;">
          <nz-option [nzLabel]="'Home'" [nzValue]="'Home'"></nz-option>
          <nz-option [nzLabel]="'Company'" [nzValue]="'Company'"></nz-option>
        </nz-select>
        <nz-cascader [nzOptions]="options" style="width: 70%;"></nz-cascader>
      </nz-input-group>
    </div>
  `,
  styles: [
    `
      .input-3[disabled] {
        pointer-events: none; /* 不再接收任何指针事件 */
        background-color: rgb(255, 255, 255); /* 统一背景色 */
      }
      .input-3-left {
        border-right-width: 0;
      }
      .input-3-left:not([disabled]):hover,
      .input-3-left:not([disabled]):focus {
        border-right-width: 1px;
      }
      .input-3-middle {
        border-left-width: 0;
        border-right-width: 0;
      }
      .input-3-middle:not([disabled]):hover,
      .input-3-middle:not([disabled]):focus {
        border-left-width: 1px;
        border-right-width: 1px;
      }
      .input-3-right {
        border-left-width: 0;
      }
      .input-3-right:not([disabled]):hover,
      .input-3-right:not([disabled]):focus {
        border-left-width: 1px;
      }
    `,
  ],
})
export class InputGroupDemoComponent {
  options = [
    {
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [
        {
          value: 'hangzhou',
          label: 'Hangzhou',
          children: [
            {
              value: 'xihu',
              label: 'West Lake',
              isLeaf: true,
            },
          ],
        },
        {
          value: 'ningbo',
          label: 'Ningbo',
          isLeaf: true,
        },
      ],
    },
    {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [
        {
          value: 'nanjing',
          label: 'Nanjing',
          children: [
            {
              value: 'zhonghuamen',
              label: 'Zhong Hua Men',
              isLeaf: true,
            },
          ],
        },
      ],
    },
  ];
}
